<template>
    <div class="albumtopinfo">
        <div class="left-img">
            <img :src="albuminfo.blurPicUrl" alt="">
        </div>
        <!-- 右侧信息 -->
        <div class="right-info">
            <!-- 专辑名 -->
            <div class="album-name">
                <el-tag effect="plain" size="large" class="tag">专辑</el-tag>
                <span class="name">{{ albuminfo.name }}</span>
            </div>
            <!-- 相关操作 -->
            <div class="operation">
                <el-button class="e" icon="VideoPlay" @click="playAll">播放全部</el-button>
                <el-button :icon="isSub ? 'FolderChecked' : 'FolderAdd'" class="f">{{
                    props.isSub ? '已收藏' + '(' + albumDynamic.subCount + ')' : '收藏' + '(' + albumDynamic.subCount + ')'
                }}
                </el-button>
                <el-button icon="Share" type="default" class="f">分享({{ albumDynamic.shareCount }})</el-button>
            </div>
            <!-- 歌手 -->
            <div class="singer-name">
                <span>歌手：</span>
                <span v-for="(item, index) in albuminfo.artists" :key="item.id" class="name">{{ index ==
                albuminfo.artists.length - 1 ? item.name : item.name + '/' + '\t' }} </span>
            </div>
            <!-- 发行时间 -->
            <div class="time">
                <span>发行时间：</span>
                <span class="t">{{ time }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useDateFormat } from '@vueuse/core'

const props = defineProps({
    albumDynamic: {
        type: Object,
        default: {}
    },
    albuminfo: Object,
    isSub: Boolean,

})
const emit = defineEmits(['playAllSong'])

const time = computed(() => {
    return (useDateFormat(props.albuminfo.publishTime, 'YYYY-MM-DD')).value
})
//点击播放全部按钮
function playAll() {
    emit('playAllSong')  //触发自定义函数
}
</script>

<style lang="scss" scoped>
.albumtopinfo {
    display: flex;
    align-items: center;


    .left-img {
        height: 200px;
        width: 210px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right-info {
        margin-left: 20px;

        .album-name {
            .tag {
                border-color: var(--mycompColor);
                color: var(--mycompColor);
                font-size: 15px;
            }

            .name {
                margin-left: 20px;
                font-weight: 700;
                font-size: 20px;
            }
        }

        .operation {
            margin-top: 15px;
        }

        .singer-name {
            margin-top: 15px;

            .name {
                cursor: pointer;
                color: #507daf;

                &:hover {
                    color: #0b58c2;
                }
            }
        }

        .time {
            margin-top: 15px;

            .t {
                font-size: 13px;
                color: #969696;
            }
        }
    }

}

:deep(.e) {
    padding: 8px 30px;
    border-radius: 20px;
    color: white;
    background-color: #fd544e;
}

:deep(.e:hover) {
    background-color: #e94943;
    border-color: #e94943;
}

// :deep(.e:focus) {
//     background-color: #f2f2f2;
//     border-color: #bebaba;
//     color: black;
// }

:deep(.f) {
    padding: 8px 30px;
    border-radius: 20px;
}

:deep(.f:hover) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}

:deep(.f:focus) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}
</style>